<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/7/11 0011
  Time: 下午 4:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<html>
<head>
    <title>首页</title>

    <script src="../../js/jquery-3.3.1.min.js" charset="utf-8"></script>
    <script src="../../js/cookie/jquery.cookie.js" charset="utf-8"></script>
    <script src="../../layui-v2.2.5/layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="../../layui-v2.2.5/layui/css/layui.css" media="all">
</head>
<body>

<style>
    .all_list1 > .on {
        -moz-box-shadow: 1px 1px 7px rgba(65, 65, 65, .4);
        -webkit-box-shadow: 1px 1px 7px rgba(65, 65, 65, .4);
        box-shadow: 1px 1px 7px rgba(65, 65, 65, .4);
        border: none;
    }
</style>

<div class="layui-fluid">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header" lig-lang="label-searchTitle">数据统计</div>
                <div class="layui-card-body">
                    <table class="layui-table" lay-size="lg">
                        <colgroup>
                            <col>
                            <col>
                            <col>
                        </colgroup>
                        <thead>
                        <tr>
                            <th>今日订单笔数：<span id="thisDayNum" style="color: blue">0</span><span style="color: blue">（单）</span>  金额：<span id="thisDayDiscount" style="color: blue">0</span><span style="color: blue">（元）</span></th>
                            <th>处理中的笔数：<span id="toDayDisposeNum" style="color: blue">0</span><span style="color: blue">（单）</span> 金额：<span id="toDayDisposeDiscount" style="color: blue">0</span><span style="color: blue">（元）</span></th>
                            <th>今日支付笔数：<span id="payCount" style="color: blue">0</span><span style="color: blue">（单）</span> 金额：<span id="payMoney" style="color: blue">0</span><span style="color: blue">（元）</span></th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-body">

                    <form class="layui-form">
                        <div class="layui-row">
                            <div class="layui-inline">
                                <select id="orderState">
                                    <option value="-1">请选择查看订单状态</option>
                                    <%--<option value="0">处理中</option>--%>
                                    <%--<option value="3">交易失败</option>--%>
                                    <%--<option value="4">交易成功</option>--%>
                                    <%--<option value="5">已打款</option>--%>
                                    <option value="0">处理中</option>
                                    <option value="3">失败订单</option>
                                    <%--<option value="4">交易成功</option>--%>
                                    <option value="5">交易成功</option>
                                    <option value="6">订单异常</option> <%--面值不符订单--%>
                                    <option value="7">手工订单</option> <%--未配置订单--%>
                                </select>
                            </div>
                            <div class="layui-inline">
                                <select id="payState">  <%--支付状态  未付款，已付款，付款失败--%>
                                    <option value="-1">请选择查看支付状态</option>
                                    <%--<option value="0">处理中</option>--%>
                                    <%--<option value="3">交易失败</option>--%>
                                    <%--<option value="4">交易成功</option>--%>
                                    <%--<option value="5">已打款</option>--%>
                                    <option value="0">未付款</option>
                                    <option value="2">付款失败</option>
                                    <option value="1">已付款</option>
                                </select>
                            </div>
                            <div class="layui-inline">
                                <select id="className">
                                    <option value="">请输入卡种</option>
                                    <c:forEach items="${classNames}" var="cl">
                                        <option value="${cl}">${cl}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>

                        <div class="layui-row" style="margin-top:10px;">
                            <div class="layui-input-inline">
                                <input type="text" placeholder="请输入卡号" id="demoReload2" class="layui-input">
                            </div>
                            <div class="layui-input-inline">
                                <input type="text" placeholder="请输入卡密码" id="demoReload3" class="layui-input">
                            </div>
                            <div class="layui-input-inline">
                                <input type="text" placeholder="请输入会员ID" id="memberId" class="layui-input">
                            </div>
                            <div class="layui-input-inline">
                                <input type="text" placeholder="请输入面值" id="feedbackValue" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-row" style="margin-top:10px;">
                            <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
                                开始时间:
                            </div>
                            <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
                                <input type="text" value="${startDate}" class="layui-input" autocomplete="off" id="startDate">
                            </div>
                            <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
                                结束时间：
                            </div>
                            <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
                                <input type="text" value="${endDate}" class="layui-input" autocomplete="off" id="endDate">
                            </div>
                            <div class="layui-input-inline" style="width:80px">
                                <button class="layui-btn" lay-submit lay-filter="formDemo"><i class="layui-icon">&#xe615;</i>搜索</button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>


            <div class="layui-card" style="margin-bottom: 10px;">
                <div class="layui-card-body">
                    <div class="layui-btn-container">
                        <div class="layui-btn layui-btn-sm" id="batchUpdateStatus">批量修改状态</div>
                    </div>
                    <table class="layui-table"
                           lay-data="{url:'/shop/dataStatistics?memberId=${memberId}&orderState=${orderState}&cardNumber=${cardNumber}&startDate1=${startDate1}&endDate1=${endDate1}&className=${className}&feedbackValue=${feedbackValue}&payState=${payState}&alipayId=${alipayId}&cardPassWord=${cardPassWord}',
                            page:true, id:'id,feedbackId'} "
                           lay-filter="demo" id="demo">
                        <thead>
                        <tr>
                            <th lay-data="{checkbox:true}"></th>
                            <th lay-data="{field:'type', width:90,templet:function(d){
                                switch(d.type){
                                    case '0':return 'PC';
                                    case '1':return '移动端';
                                    case '2':
                                    return '支付宝';
                                    case '3':
                                    return '小程序1';
                                    case '4':
                                    return '小程序2';
                                    case '5':
                                    return '小程序3';
                                    case '6':
                                    return '小程序4';
                                     case '7':
                                    return 'app';
                                    default:'未知';
                                }
                            }}">来源
                            </th>

                            <th lay-data="{field:'commodityName', width:150}">卡种</th>
                            <th lay-data="{field:'cardNumber', width:200}">卡号</th>
                            <th lay-data="{field:'cardPassword', width:200}">卡密</th>
                            <th lay-data="{field:'feedbackValue', width:100}">面值</th>
                            <th lay-data="{field:'discountMoney', width:100}">折扣金额</th>
                            <th lay-data="{field:'state', width:90,templet:function(d){
                                switch(d.state){
                                case 0:return '处理中';
                                case 1:return '处理中';
                                case 2:return '处理中';

                                case 3:
                                return '交易失败';

                                <%--case 4:--%>
                                <%--return '交易成功';--%>


                                case 5:
                                return '已结算';

                                case 6:
                                return '订单异常';

                                case 7:
                                return '手工状态';

                                default:d.state
                                }
                                }}">
                                订单状态
                            </th>

                            <th lay-data="{field:'payState', width:100,templet:function(d){
                                switch(d.payState){case 0: return '未付款';case 1:return '已付款'; case 2: return '付款失败';default:return '数据有误';}
                            }}">付款状态
                            </th>

                            <th lay-data="{field:'createTime', width:170}">创建时间</th>
                            <th lay-data="{field:'payTime', width:170}">付款时间</th>
                            <%--<th lay-data="{field:'payTime', width:100,templet:functionf(d){--%>
                            <%--if(d.payTime==null){return '未支付'}else{return d.payTime}--%>
                            <%--}}" >支付时间--%>
                            <%--</th>--%>
                            <th lay-data="{ align:'center',width:180, toolbar: '#operation'}">操作</th>


                            <th lay-data="{field:'msg', width:200}">反馈信息</th>
                            <th lay-data="{field:'memberId', width:300}">会员id</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<%--<div class="layui-input-inline" style="margin-left:1rem;width:80px">
    <a class="layui-btn layui-btn-small"
       style="line-height:1.6em;margin-top:4px;float:left;margin-left: 100rem"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
数据统计:
<table class="layui-table" lay-size="lg">
    <colgroup>
        <col>
        <col>
        <col>
    </colgroup>
    <thead>
    <tr>
        <th>今日订单笔数：<span id="thisDayNum" style="color: blue">0</span><span style="color: blue">（单）</span>  金额：<span id="thisDayDiscount" style="color: blue">0</span><span style="color: blue">（元）</span></th>
        <th>处理中的笔数：<span id="toDayDisposeNum" style="color: blue">0</span><span style="color: blue">（单）</span> 金额：<span id="toDayDisposeDiscount" style="color: blue">0</span><span style="color: blue">（元）</span></th>
        <th>今日支付笔数：<span id="payCount" style="color: blue">0</span><span style="color: blue">（单）</span> 金额：<span id="payMoney" style="color: blue">0</span><span style="color: blue">（元）</span></th>
    </tr>
    </thead>
</table>--%>
<script>

    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#startDate' //指定元素
            ,isInitValue: false //是否允许填充初始值，默认为 true
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#endDate' //指定元素
            ,isInitValue: false //是否允许填充初始值，默认为 true
        });
    });
</script>
<script>
    $(
        $.ajax({
            url: '/shop/statisticsDataSum',
            type: 'POST', //GET
            async: true,    //或false,是否异步

            timeout: 5000,    //超时时间
            dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
            beforeSend: function (xhr) {
                /*console.log(xhr)
                 console.log('发送前')*/
            },
            success: function (data) {
                var todayNum = data.data.today.todayNum;
                // var todayFaceValue = data.data.today.todayFaceValue;
                var todayDiscount = data.data.today.todayDiscount;
                var toDayDisposeNum = data.data.todayDispose.todayNum;
                var toDayDisposeDiscount=data.data.todayDispose.todayDiscount;
                var payCount=data.data.pay.payCount;
                var payMoney=data.data.pay.payMoney;
                // var allNum = data.data.all.allNum;
                // var allFaceValue = data.data.all.allFaceValue;
                // var allDiscount = data.data.all.allDiscount;
                $('#thisDayNum').text(todayNum);
                // $('#thisDayFaceValue').text('总面值' + (todayFaceValue == null ? '0' : todayFaceValue));
                $('#thisDayDiscount').text(todayDiscount == null ? '0' : todayDiscount);
                $('#toDayDisposeNum').text(toDayDisposeNum);
                $('#toDayDisposeDiscount').text(toDayDisposeDiscount == null ? '0' : toDayDisposeDiscount);
                $('#payCount').text(payCount);
                $('#payMoney').text(payMoney == null ? '0' : payMoney);
                // $('#allNum').text(data.data.all.allNum);
                // $('#allFaceValue').text('总面值' + (allFaceValue == null ? '0' : allFaceValue));
                // $('#allDiscount').text('折扣金额' + (allDiscount == null ? '0' : allDiscount));
            },
            error: function (xhr, textStatus) {
                console.log('错误')
                console.log(xhr)
                console.log(textStatus)
            },
            complete: function () {
                //console.log('结束')
            }
        })
    );


</script>



<br/>

<script>
    /**
     * 根据订单状态查询
     * */
    function toSearch(keyword) {
        layui.use('table', function () {
            table = layui.table;
            table.reload('id,feedbackId', {
                url: '/shop/dataStatistics'
                , where: {
                    orderState: keyword
                } //设定异步数据接口的额外参数
                //,height: 300
            });
        });
        table.reload('id,feedbackId');
    }

    /**
     * 根据订单号 或者卡号查询
     * @param keyword
     */

    //监听提交
    //Demo
    layui.use(['form', 'table'], function () {
        var form = layui.form;
        table = layui.table;
        //监听提交
        form.on('submit(formDemo)', function () {
            table.reload('id,feedbackId', {
                url: '/shop/dataStatistics'
                , where: {
                    orderState: $('#orderState').val(),
                    cardNumber: $('#demoReload2').val(),
                    cardPassWord: $('#demoReload3').val(),
                    memberId:$('#memberId').val(),
                    className:$('#className').val(),
                    alipayId:$('#alipayId').val(),
                    feedbackValue:$('#feedbackValue').val(),
                    payState: $('#payState').val(),
                    startDate1:$('#startDate').val(),
                    endDate1:$('#endDate').val()
                } //设定异步数据接口的额外参数
                //,height: 300
            });
            return false;

        });

    });
</script>


<br>


<script type="text/html" id="operation">
    <a class="layui-btn layui-btn-xs" lay-event="resubmit">重推</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-xs" lay-event="activityActivityList">详情</a>
</script>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use('table', function () {
        var table = layui.table;


        $('#batchUpdateStatus').click(function () {
            var rows = table.checkStatus('id,feedbackId');
            console.log(rows);
            if (rows.data.length <= 0) {
                return;
            }

            var cardIds = '';
            $.each(rows.data, function(i, item) {
                cardIds += "," + item.id;
            });
            if (cardIds != '') {
                cardIds = cardIds.substr(1);
            }

            layer.open({
                type: 2,
                area: ['60%', '55%'],
                offset: '20px',
                shadeClose: true,
                content: '/shop/toBatchUpdateCardStatus?cardIds=' + cardIds,
                end: function () {
                    console.log("页面要刷新");
                    table.reload('id,feedbackId');
                }
            });
        });


        //监听工具条
        table.on('tool(demo)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                layer.msg('ID：' + data.id + ' 的查看操作');
            } else if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                layer.open({
                    type: 2,
                    area: ['80%', '80%'],
                    offset: '20px',
                    shadeClose: true,
                    content: '/shop/updateCardOrder?id=' + data.id,
                    end: function () {
                        console.log("页面要刷新");
                        table.reload('id,feedbackId');
                    }
                });


            } else if (obj.event === 'resubmit') {//重新推送
                $.get("/shop/isApiNumSet",{feedbackId:obj.data.feedbackId},function(reData){
                    if(reData.result){
                        layer.open({
                            type: 2,
                            area: ['80%', '80%'],
                            offset: '20px',
                            shadeClose: true,
                            content: '/shop/toResubmitCard?cardId=' + data.id,
                            end: function () {
                                console.log("页面要刷新");
                                table.reload('id,feedbackId');
                            }
                        });
                    }else{
                        layer.msg("未配置接口顺序");
                    }
                });



            }else if (obj.event=='activityActivityList'){//订单详情
                layer.open({
                    type: 2,
                    area: ['80%', '80%'],
                    offset: '20px',
                    shadeClose: true,
                    content: '/shop/orderDetails?cardId=' + data.id,
                    end: function () {
                        console.log("页面要刷新");
                        table.reload('id,feedbackId');
                    }
                });
            }
        })
    })
</script>

<script>
    $('.all_list1 >div').click(function () {
        $(this).addClass('on')
        $(this).siblings().removeClass('on')
    })
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="shopProduct">商品设置</a>
</script>
<script type="text/html" id="activityActivityList">
    <a class="layui-btn layui-btn-xs" lay-event="activityActivityList">订单详情</a>

</script>

<script type="text/html" id="orderNumber">
    <a class="layui-btn layui-btn-xs" lay-event="editShop">编辑信息</a>
</script>


</body>
</html>
